<template>
	<view
		class="search"
		@click="$emit('clickInput',value)"
	>
		<u-icon
			class="search-icon"
			name='search'
			size="35"
			color="#767ca1"
		/>
		<input
			class="search-input"
			type="text"
			:placeholder="placeholder"
			:maxlength="maxlength"
			:disabled="disabled"
			:value="value"
			@input="$emit('input',$event.target.value)"
		>
		<button
			class="search-button"
			@click.stop="$emit('clickSearch',value)"
		>
			搜索
		</button>
	</view>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    maxlength: {
      type: Number,
      default: -1
    },
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    disabled: {
      type: Boolean,
      default: false
    },
  }
}
</script>

<style lang="scss" scoped>
.search {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;

  &-icon {
    position: absolute;
    left: 15px;
  }

  &-input {
    flex: 1;
    height: 100%;
    padding-left: 43px;
    margin-right: 15px;
    background-color: #ffffff;
    border-radius: $radiusLarge;
  }

  ::v-deep input {
    height: 100%;
  }

  &-button {
    width: 160rpx;
    height: 100%;
    line-height: 40px;
    background-color: $primary1;
    border-radius: $radiusLarge;
  }
}
</style>
